// 本月素材回收进度
<template>
    <div class="gradient-content full-width">
        <div :id="idName"></div>
    </div>
</template>

<script>
import { Chart } from '@antv/g2'

export default {
    props: {
        idName: {
            type: String,
            default: 'donutChart',
        },
        chartData: {
            type: Array,
            default: () => [],
        },
        annotation: {
            type: String,
            default: '0%',
        },
        shop_id: {
            type: [String, Number],
            default: '17',
        },
    },
    data() {
        return {
            chart: null,
            height: 0,
        }
    },
    watch: {
        chartData(val) {
            this.chart.changeData(val)
        },
    },
    mounted() {
        this.$nextTick(() => {
            const boxContElement = document.querySelector(`.gradient-content`)
            this.height = boxContElement.clientHeight
            if (this.chart) {
                this.chart.destroy()
            }
            this.render()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.destroy()
    },
    methods: {
        render() {
            // Step 1: 创建 Chart 对象
            this.chart = new Chart({
                container: this.idName,
                height: this.height,
                autoFit: true,
                padding: [10, 10, 10, 10],
            })

            // Step 2: 载入数据源
            this.chart.data(this.chartData)
            const color = this.shop_id == 18 ? '#2db2ff' : '#fff'
            // Step 3: 创建图形语法，定义 Position 和 Color
            this.chart.scale('percent', {
                formatter: val => {
                    val = val * 100 + '%'
                    return val
                },
                style: {
                    fill: color,   
                },
            })
            this.chart.coordinate('theta', {
                radius: 0.75,
                innerRadius: 0.70,
                startAngle: -Math.PI / 4,        // -45°
                endAngle: -Math.PI / 4 + 3 * Math.PI / 2  // -45° + 270° = 225° (-135°)
            })
            this.chart.tooltip({
                showTitle: false,
                showMarkers: false,
                itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
            })
            // 辅助文本
            this.chart.annotation().text({
                position: ['50%', '50%'],
                content: this.annotation,
                style: {
                    fontSize: 12,
                    fill: color,
                    textAlign: 'center',
                },
                offsetY: 0,
            })
            this.chart.legend({
                // position: 'right',
                itemName: {
                    style: {
                        fill: this.shop_id == 18 ? '#2db2ff' : '#fff',
                    },
                },
                pageNavigator: {
                    marker: {
                        style: {
                            fill: color,
                            inactiveFill: color,
                        },
                    },
                },
            })
            this.chart
                .interval()
                .adjust('stack')
                .position('percent')
                // .color(['#f00', '#ff0'])
                // .color([ '#444466', '#20204a'])
                .color('item')
                .label('percent', percent => {
                    return {
                        content: data => {
                            return `${data.item}: ${percent * 100}%`
                        },
                        style: {
                            fill: this.shop_id == 18 ? '#2db2ff' : '#fff',  // 设置为你想要的颜色
                            fontSize: 12,
                            fontWeight: 'normal'
                        }
                    }
                })
                .tooltip('item*percent', (item, percent) => {
                    percent = percent * 100 + '%'
                    return {
                        name: item,
                        value: percent,
                    }
                })

            this.chart.interaction('element-active')

            // Step 4: 渲染图表
            this.chart.render()
        },
    },
}
</script>
